<template>
	<view>
		<tt-bar leftIcon="icon-back" title="老带新福利详情" bgColor="#fed407" titleAlign="left">
			<template v-slot:rightCnt>
				<text class="iconfont icon-shoucangdianjia" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}" @tap="toshop"></text>
				<!-- <text class="iconfont icon-home rIcon" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}" @tap="toHome"></text> -->
			</template>
			
		</tt-bar>
		<view class="content">
			<text class="xin" v-if="type == 2">新学员福利</text>
			<text class="zhong" v-if="type == 1">老学员福利</text>
			<view class="box">
				<text style="font-size: 24rpx;">扫码核销</text>
				<canvas canvas-id="qrcode" style="width: 75px;height:75px;" />
				<text style="font-size: 24rpx;">{{ code }}</text>
			</view>
			<view class="shopimgbox"><image :src="storeLogo" mode=""></image></view>
			<view class="imgbox"><image :src="'http://cdn.peixun.de123.com'+oldinfo.img" mode=""></image></view>
			<view class="oldnewbox">
				<view class="oldnewbox1" style="font-size: 30rpx;color: red;font-weight: 700;margin-top: 30rpx;margin-bottom: 10rpx;"><text>老带新福利</text></view>
				<view class="oldnewbox2" style="font-size: 24rpx;color:#4e4e4e;">
					<text>{{ oldinfo.oldAndNewWelfare }}</text>
				</view>
			</view>
		</view>
		<view class="oldnewbtn">
			<button class="oldnewbtn1" @tap="showPoster"><text>分享到朋友圈</text></button>
			<button open-type="share" class="oldnewbtn2"><text>送给好友</text></button>
		</view>
		<qrcode-poster ref="poster" :title="name.substr(0, 12)" :headerImg="'http://cdn.peixun.de123.com'+oldinfo.img"></qrcode-poster>
	</view>
</template>

<script>
import QrcodePoster from '../components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';
import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js';

import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			isLogin: state => state.user.isLogin,
			initInfo: state => state.sys.initInfo,
			parentId: state => state.user.parentId
		})
	},
	components: {
		QrcodePoster
	},
	data() {
		return {
			storeId: 0,
			oldinfo: {},
			name: '',
			actOldAndNewId: 0,
			type: 0,
			code: '',
			imgUrl: '',
			id: 0,
			cid: 0,
			storeLogo: '',
			isShare:0
		};
	},
	methods: {
		// apiyesoldxiangqing () {
		// 	this.$store
		// 		.dispatch('apiyesoldxiangqing', {
		// 			storeId:this.storeId,
		// 			userId: this.userInfo.userId
		// 		})
		// 		.then(res => {
		// 			console.log(res)
		// 			this.oldinfo = res.data.oldAndNewWelfarePage
		// 			this.name = res.data.oldAndNewWelfarePage.activityOldAndNew.actName
		// 			this.actOldAndNewId = res.data.oldAndNewWelfarePage.activityOldAndNew.id
		// 			this.code = res.data.oldAndNewWelfarePage.tryCode
		// 			console.log(this.code)
		// 			// this.type = res.data.oldAndNewWelfarePage.type
		// 			// console.log(this.type)
		// 		});
		// },
		
		toshop(){
			
		
			this.toPage(
			{
				url:'shopDetail',
				id:this.storeId
			}
			
			)
		},
		make() {
			uQRCode.make({
				canvasId: 'qrcode',
				componentInstance: this,
				text: this.code,
				size: 75,
				margin: 5,
				backgroundColor: '#ffffff',
				foregroundColor: '#000000',
				fileType: 'png',
				success: res => {
					// console.log(res)
					this.imgUrl = res;
				}
			});
		},
		apiwelfarePage() {
			this.$store
				.dispatch('apiwelfarePage', {
					id: this.id,
					type: this.type
				})
				.then(res => {
					console.log(res);
					if (this.type == 1) {
						this.oldinfo = res.data.map.oldCard;
						this.actOldAndNewId = res.data.map.oldCard.actOldAndNewId;
						this.code = res.data.map.oldCard.tryCode;
						this.name = res.data.map.oldCard.actName;
						this.cid = res.data.map.oldCard.id;
						// console.log(this.cid)
						this.storeLogo = res.data.map.oldCard.storeLogo;
					} else if (this.type == 2) {
						this.oldinfo = res.data.map.newCard;
						this.actOldAndNewId = res.data.map.newCard.actOldAndNewId;
						this.code = res.data.map.newCard.tryCode;
						this.name = res.data.map.newCard.actName;
						// this.cid = res.data.map.newCard.oldCardId;
						this.storeLogo = res.data.map.newCard.storeLogo;
					}					
				});
		},
		tongji() {
			this.$store
				.dispatch('apioldsharetongji', {
					storeId: this.storeId
				})
				.then(res => {
					// console.log(res);
				});
		},
		showPoster() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});

			let _href = '';
			_href = this.storeId + '&' + this.userInfo.userId + '&' + this.cid + '&' + this.actOldAndNewId;			
			this.$store.dispatch('apiGetMPToken').then(res => {
				// console.log(res);
				this.$store
					.dispatch('apiGetMpCodeImg', {
						token: res.data.data.access_token,
						page: 'pages/index/index',
						scene: _href,
						width: 280
					})
					.then(imgRes => {
						// console.log(imgRes);
						this.tongji();
						if (imgRes.data.code == 1) {
							this.$refs.poster.showCanvas(imgRes.data.data);
						} else {
						}
					});
			});
		},
		oldopen() {
			this.$store
				.dispatch('apiOpenold', {
					storeId: this.storeId,
					userId: this.isLogin ? this.userInfo.userId : 0
				})
				.then(res => {
					// console.log(res.data.oldCardId);
					this.cid = res.data.oldCardId
				});
		}
	},
	//页面分享
	onShareAppMessage(res) {
		this.tongji();
		return {
			title: '“送你一个优惠福利，快来领取吧！” ' + this.name,
			path: 'pagesB/oldfulifriend/oldfulifriend?storeId=' + this.storeId + '&userId=' + this.userInfo.userId + '&cid=' + this.cid + '&actOldAndNewId=' + this.actOldAndNewId + '&isShare=1',
			imageUrl: 'http://cdn.peixun.de123.com'+this.oldinfo.img
		};
	},
	onLoad(data) {
		this.storeId = data.storeId;
		this.type = data.type;
		this.id = data.id;
		if(this.type==2){
			this.oldopen();
		}
		this.apiwelfarePage();
		setTimeout(() => {
			this.make();
		}, 500);
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.apiwelfarePage();
			this.make();
			uni.stopPullDownRefresh();
		}, 1500);
	}
};
</script>

<style lang="less">
body {
	background-color: #f2f2f2;
}
.content {
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
	position: relative;
	margin-bottom: 150rpx;
	// background-color: pink;
	.imgbox {
		width: 100%;
		height: 1332rpx;
		// padding: 0 20rpx;
		// background-color: green;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		position: absolute;
		top: 20rpx;
		right: 50rpx;
		text-align: center;
	}
	.shopimgbox {
		position: absolute;
		top: 60rpx;
		left: 60rpx;
		text-align: center;
		image {
			border-radius: 7rpx;
			width: 150rpx;
			height: 150rpx;
		}
	}
	.oldnewbox {
		// background-color: red;
		width: 100%;
		// height: 190rpx;
	}
	.xin {
		position: absolute;
		z-index: 2;
		display: block;
		top: 0;
		left: 0;
		background-color: red;
		padding: 0 10rpx 0 10rpx;
		font-size: 26rpx;
		color: #ffffff;
		border-top-right-radius: 25upx;
		border-bottom-right-radius: 25upx;
	}
	.zhong {
		position: absolute;
		z-index: 2;
		display: block;
		top: 0;
		left: 0;
		background-color: #f08300;
		padding: 0 10rpx 0 10rpx;
		font-size: 26rpx;
		color: #ffffff;
		border-top-right-radius: 25upx;
		border-bottom-right-radius: 25upx;
	}
}
.oldnewbtn {
	// background-color: blue;
	width: 100%;
	height: 150rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	padding: 0 40rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	.oldnewbtn1 {
		width: 320rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: #07c160;
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #fff;
	}
	.oldnewbtn2 {
		background-color: #f59423;
		width: 320rpx;
		height: 100rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #fff;
	}
}

.icon-shoucangdianjia {
		font-size: 44upx;
		font-weight: normal;
		width: 70upx;
		height: 70upx;
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
	}
</style>
